<template>
  <div>
    <div class="imgBox" align="center">
      <div class="leftBox" v-for="(v,i) in data1" :key="i" v-if="i==1" @click="click(v)">

        <div v-if="i==1">
          <img src="../../assets/img/TOP2.png" alt="" style="width: 12.27vw;height: 12.27vw;margin-top: 5.6vw;">
          <div class="box" style="height: 40vw;border-bottom-right-radius:0px !important;">
            <div>
              <img :src="v.image" alt="" style="width: 100%;height: 100%;">
            </div>
            <p>全平台销量榜首</p>
            <p style="color: #ff4c50;font-size: 17px;" class="price">￥{{v.sell_price}}</p>
          </div>
        </div>

      </div>
      <div class="leftBox" v-for="(v,i) in data1" :key="i" v-if="i==0">
        <div style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;" v-if="i == 0" @click="click(v)">
          <img src="../../assets/img/TOP1.png" alt="">
          <div class="box" style="margin-top: 1.5vw;border-bottom-left-radius:0px;border-bottom-right-radius:0px;position: relative;box-shadow: 0 2px 8px rgba(245,233,101,.5);">
            <div>
              <img :src="v.image" alt="" style="width: 100%;height: 100%;">
            </div>
            <p>全平台销量榜首</p>
            <p style="color: #ff4c50;font-size: 17px;" class="price">￥{{v.sell_price}}</p>
          </div>
        </div >
      </div>
      <div class="leftBox" v-for="(v,i) in data1" :key="i" v-if="i==2" @click="click(v)">
        <div v-if="i == 2 ">
          <img src="../../assets/img/TOP3.png" alt="" style="width: 12.27vw;height: 12.27vw;margin-top: 5.6vw;">
          <div class="box" style="height: 40vw;border-bottom-left-radius:0px;">
            <div>
              <img :src="v.image" alt="" style="width: 100%;height: 100%;">
            </div>
            <p>全平台销量榜首</p>
            <p style="color: #ff4c50;font-size: 17px;" class="price">￥{{v.sell_price}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
  export default {
    name: "topThree",
    props:['data1'],
    data(){
      return{
        limit_id:0,
        group_id:0,
        join_id:0,
        type:1,
        activity_id:0,
        platform:this.$route.query.version,
      }
    },
    methods:{
      click(v){
        if (this._globe.isAndroid) {
          if (window.android != null && typeof window.android != "undefined") {
              window.android.openGoods(this.type,v.goods_id,this.join_id,this.limit_id,this.group_id,this.activity_id);//
          } else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
        if (this._globe.isIos) {
          if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id});//
          }else {
            this.$router.push({
              path:'detail',query:
                {type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:this.group_id,activity_id:this.activity_id}
            })
          }

        }
      }
    },
    mounted(){
      window.openGoods= this.click();
    }
  }
</script>

<style scoped lang="scss">
  .imgBox{
    width: 92vw;
    height: 13vw;
    margin: 0px auto;
    display: flex;
    padding-top: 4vw;
    .leftBox{
      float: left;
    }
    div{
      flex: 1;
      display: inline-block;
      img{
        width: 4.8vw;
        height: 12.27vw;
        display: inline-block;
      }
      .box{
        width:30.67vw;
        height:44vw;
        background: #fff;
        border-radius: 2.5vw;
        div{
          width: 20vw;
          height: 20vw;
          box-shadow: 0px 0px 1px 1px #f5f5f5;
          margin-top: 5.3vw;
        }
        p{
          font-size: 13px;
          color: #333;
          text-align: center
        }
        .price{
          text-align: left;
          text-indent: 2vw;
        }
      }
    }

  }
</style>
